// 获取表格元素
const table = document.querySelector('#bagua-table')
// 获取编辑单元格的，元素和内容
let editingTd

/**
 * 表格点击事件
 */
table.onclick = function (event) {
	// 通过 closest 方法，获取匹配到的父元素或自身元素，任何一个匹配到就返回。如果都没有匹配到，返回 null。
	// edit-cancel：取消按钮 edit-ok：确认按钮 td：单元格
	const target = event.target.closest('.edit-cancel,.edit-ok,td')

	// 判断当前获取到的元素是否包含在表格中
	if (!table.contains(target)) return

	if (target.clsName === 'edit-cancel') {
		// 点击的是取消按钮
		finishTdEdit(editingTd.elem, false)
	} else if (target.clsName === 'edit-ok') {
		// 点击的是确认按钮
		finishTdEdit(editingTd.elem, true)
	} else if (target.nodeName == 'TD') {
		// 点击的是单元格，并判断是否是编辑中的单元格。
		if (editingTd) return
		makeTdEditable(target)
	}
}

/**
 * 创造可编辑的单元格
 */
function makeTdEditable(td) {
	// 将单元格和内容保存起来
	editingTd = {
		elem: td,
		data: td.innerHTML,
	}

	// 给单元格添加样式（设置为相对定位和内边距为0）
	td.classList.add('edit-td')

	// 创建文本域元素
	const textArea = document.createElement('textarea')
	textArea.style.width = td.clientWidth + 'px'
	textArea.style.height = td.clientHeight + 'px'
	textArea.className = 'edit-area'

	// 设置文本域内容，移除单元格内容，将文本域添加到单元格中，让文本域获取焦点。
	textArea.value = td.innerHTML
	td.innerHTML = ''
	td.appendChild(textArea)
	textArea.focus()

	// 创建字符串内容的形式的按钮，并通过 insertAdjacentHTML 方法，插入到单元格中渲染。
	td.insertAdjacentHTML(
		'beforeEnd',
		'<div class="edit-control><button class="edit-ok">OK</button><button class="edit-cancel">CANCEL</button></div>'
	)
}

/**
 * 完成单元格编辑
 */
function finishTdEdit(td, isOk) {
	if (isOk) {
		// 点击的是确认按钮，将文本域的值设置为单元格的内容
		td.innerHTML = td.firstChild.value
	} else {
		// 点击的是取消按钮，将单元格的内容设置为原来的内容
		td.innerHTML = editingTd.data
	}

	// 移除给单元格添加的样式
	td.classList.remove('edit-td')

	// 移除存储的单元格和内容
	editingTd = null
}
